ページの繋がりの視覚化 (daiiz)

こんばんは

Scrapbox実験コーナー

バックナンバー

今日はScrapboxプロジェクト内のページの繋がりを視覚化します

視覚化の簡単なルール

pageの繋がり

pageをnode、page動詞の参照関係をedgeとしたグラフ構造を考える

https://gyazo.com/d5b9429dcd5b97ebc7771399bbd603e4

pageの参照数、被参照数の合計

＝ 矢印の本数の合計

＝ 3

矢印の候補

[文中リンク]

#ハッシュタグ

空ページへの参照も含む

オレンジ色のリンク

存在しないけど関連ページは通るページ

ざっくり雰囲気

https://gyazo.com/9bf7d7ffa1237d18f18e5bcf3221d25e

nodeをつまんで振ってみる

繋がっているページが大まかにわかる

https://gyazo.com/4425b6fed312cb82b4e4086adc422365

のちほど実演

nodeをダブルクリックしてページを開ける

漠然と眺めてページを見つける体験

https://gyazo.com/27ef0dc910fdbd465be10456e2fb1b26

デモ

誰でも試せます🎉🎉🎉🎉🎉

手順. 1

プロジェクトのページのjson dataをダウンロード

https://gyazo.com/6b7a5bbc1b297229d50b9eb37217b289

または、Settings > Page data画面から

https://gyazo.com/7591a3355bd0261eb4f444c0ea7e176c

手順. 2

Google Chromeでscrap graph を開く

先程入手したページデータを読み込む

グラフを描画するまでの処理はすべてclientで完結

network通信しないのでprivate projectも安心して試せる

https://gyazo.com/cf11bbb877101c23b5304d83085241b9

手順. 2

ページが多いプロジェクトでも (いまのところ) 問題なし

4900ページを与えても動いたので大丈夫

読み込み〜加工〜描画の待ち時間はConsoleを眺めていると退屈しない

https://gyazo.com/abd398b221ab87ea529f9878e979a526

デモ

https://gyazo.com/750fcfca435be7c85e384ea47a7d9723

デモで見えてくるもの

まだ繋がっていないページ

ランドマーク的なページ

いろんなpageと繋がっているページは大きな円 (ハブページ?)

複数人利用ケースと、個人利用ケースでのグラフの見た目の違い

アクティブな書き手ごとにクラスターができるイメージ

リンク、ハッシュタグを別々に見る

https://gyazo.com/dfa9bba9e3a1dd81117b13dc1bf18fdc

リンク

https://gyazo.com/19aa7010cf2dece28e8c026904ff6e5f

https://gyazo.com/939e1be136483ead63361983c36e4c9e

数個のハブページ

長く繋がっているパスが多い

小さい円同士も繋がっている傾向あり

ハッシュタグ

https://gyazo.com/77b7c700a4bf0aeccf4681aa557c72b1

https://gyazo.com/0bc8cf9b5b82229286f6443b63e8fa72

繋がりに広がりがない

ハッシュタグによる繋がりに頼るとハブページが孤立しやすい

まとめ

ハッシュタグ

ある程度のグループを作るのは得意

だが、それら同士は繋がりにくい

そのページに辿り着いても遠くまでは行けない

最初に思いついた小さな枠組みの中で無意識に分類しようとしている

無意識にページ内のタグ数を減らす方向に働く

所属グループをパッと思いつかないときはハッシュタグを書かなくなる

→ ページは繋がらなくなる

まとめ

リンク

結果として繋がりやすい

文中リンクを使おう

文中リンクを使う方がよいという話

これらの裏付け的な図になったかも？